<template>
	<uni-popup class="pop" ref="popupRef" type="bottom" :animation="true">
		<view class="pop-content" :style="{ marginBottom: '-' + safeBottom + 'px'}">
			<view class="header">
				<view>
				</view>
				<text>套餐说明</text>
				<image @click="closePop"
					src="https://img.js.design/assets/img/66eabe069abe61d89118f24e.png#ccfd6fdbad4e05399710f7a1a0b16e9b"
					mode=""></image>
			</view>
			<scroll-view class="scroll-Y" scroll-y="true">
				<view class="container-content">
					<view class="card" v-for="(item,index) in data" :key="index">
						<view class="Model">
							{{item.name}}
						</view>
						<view class="description">
							精品小团游，结交志趣相投的好友;超高性价比:含全程住宿、餐食、管家讲解及车司服务。
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="kongbai">
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		safeBottom
	} from '@/config/systemInfo.js'
	const data = ref([{
			name: 'pro',
			description: ''
		},
		{
			name: 'max',
			description: ''
		},
		{
			name: 'ultra',
			description: ''
		}
	])
	const popupRef = ref(null);
	// 子组件方法
	const emits = defineEmits([])
	const closePop = () => {
		popupRef.value.close();
	}
	// 暴露方法给父组件
	const exposeMethods = {
		showPopup: () => {
			popupRef.value.open();
		},
		closePopup: () => {
			popupRef.value.close();
		}
	};
	defineExpose({
		...exposeMethods
	});
</script>

<style scoped>
	.pop-content {
		font-family: "仓耳渔阳体 W05";
		/* 添加样式 */
		background: #f5f6f7;
		border-radius: 16rpx 16rpx 0rpx 0rpx;
		/* padding: 86rpx 296rpx 80rpx 296rpx; */
	}

	.header {
		border-radius: 16rpx 16rpx 0rpx 0rpx;
		height: 43rpx;
		background: rgba(255, 255, 255, 1);
		padding: 24rpx 10rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 72rpx;
	}

	.header image {
		width: 44rpx;
		height: 44rpx;
	}

	.header text {
		font-size: 32rpx;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
	}

	.header>view {
		width: 44rpx;
	}

	.container-content {
		background-color: #f5f6f7;
		padding: 0 4rpx;

	}

	.container-content .card {
		display: flex;
		align-items: center;
		background-color: #FFF;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		padding: 20rpx;
	}

	.card .Model {
		font-size: 40rpx;
		border-right: 1rpx dashed rgba(191, 191, 191, 1);
		padding: 30rpx 14rpx;
	}

	.card .description {
		font-size: 22rpx;
		padding: 0 80rpx;
	}

	.scroll-Y {
		max-height: 482rpx;
	}

	.kongbai {
		height: 20rpx;
	}
</style>